<template>
  <div :style="{ width: width, height: height }" ref="containerEcharts"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "server-pie-chart",
  watch: {
    label: {
      handler: function () {
        this.init();
      },
      deep: true,
    },
    deep: true,
  },
  props: {
    // 宽
    width: {
      type: [Number, String],
      default: "130px",
    },
    // 高度
    height: {
      type: [Number, String],
      default: "118px",
    },
    value: String, // 进度值
    barMaxWidth: String, // 环形宽度
    label: String, // 底部标题
    labelColor: String,
    valueColor: String,
  },
  // 数据
  data() {
    return {};
  },
  //计算属性
  computed: {},
  //方法
  methods: {
    init() {
      let ecPie = echarts.init(this.$refs["containerEcharts"]);
      let opt = {
        // backgroundColor: '#36467E',
        title: [
          {
            text: this.value,
            left: "center",
            top: "46%",
            textStyle: {
              color: this.valueColor,
              fontSize: 24,
              fontWeight: "bold",
            },
          },
          {
            text: this.label,
            left: "center",
            top: "75%",
            textStyle: {
              color: this.labelColor,
              fontSize: 14,
              fontWeight: "normal",
            },
          },
        ],
        angleAxis: {
          show: false,
          // 后面的180表示圆环的跨越的角度， 如max设置为100*360/270,startAngle设置为-135
          max: (100 * 360) / 220,
          type: "value",
          startAngle: 200,
          splitLine: {
            show: false,
          },
        },
        // 修改环形的宽度
        barMaxWidth: this.barMaxWidth,
        radiusAxis: {
          show: false,
          type: "category",
        },
        polar: {
          // 设置环形的位置
          center: ["51%", "58%"],
          // 设置环形大小
          radius: "160%",
        },
        series: [
          {
            type: "bar",
            data: [
              {
                value: this.value,
                itemStyle: {
                  // 这里是已经达到进度的颜色
                  color: "#0dc678",
                },
              },
            ],
            barGap: "-100%",
            coordinateSystem: "polar",
            z: 3,
          },
          {
            type: "bar",
            data: [
              {
                value: 100,
                itemStyle: {
                  // 这里是环形底色
                  color: "#EEEEEE",
                  borderWidth: 0,
                },
              },
            ],
            barGap: "-100%",
            coordinateSystem: "polar",
            z: 1,
          },
        ],
      };
      ecPie.setOption(opt);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        ecPie.resize();
      });
    },
  },
  // 创建
  created() {
    if (this.value != "") {
      this.$nextTick(() => {
        this.init();
      });
    }
  },
  //  挂载
  mounted() {},
};
</script>

<style scoped>
canvas {
  border: 1px solid #000;
  cursor: pointer;
}
</style>
